<!--
*@Author: zt
*@Description: 社区论坛
*@Date: 2025-03-12
-->
<template>
  <a-layout class="f-h-100 s-bg-white" id="test">
    <a-layout-content class="bg-content">
      <a-tabs v-model:activeKey="activeKey" size="large">
        <template #rightExtra>
          <div class="rightExtra-box-style">
            <div class="rightExtra-range-box">
              <a-range-picker
                v-model:value="rangeTime"
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                @change="getSerach()"
              />
            </div>
            <div class="rightExtra-select-box">
              <a-select
                v-model:value="heatSort"
                show-search
                placeholder="请选择热度"
                style="width: 200px"
                :allowClear="true"
                :options="heatSortOptions"
                @change="getSerach()"
              ></a-select>
            </div>
          </div>
        </template>
        <!-- 全部 -->
        <a-tab-pane
          :key="enmuList.tabHeaderText[0].key"
          :tab="enmuList.tabHeaderText[0].tab"
          force-render
        >
          <div class="item-box-style" ref="parentContainer">
            <div ref="listContent">
              <a-list
                item-layout="vertical"
                size="mini"
                :data-source="listData"
              >
                <template #renderItem="{ item }">
                  <a-list-item key="item.title">
                    <a-list-item-meta>
                      <template #title>
                        <div class="title-box-style">
                          <b
                            class="title-style1"
                            @click="
                              detailClick(enmuList.dialogTitleText[0], item)
                            "
                          >
                            {{ item.title }}
                          </b>
                          <!-- 更多操作 -->
                          <div class="iconDown-style1" v-if="showAllDel">
                            <a-dropdown
                              :placement="'bottomLeft'"
                              :trigger="['click']"
                            >
                              <u-icon-font :type="enmuList.iconList.more" />
                              <template #overlay>
                                <a-menu>
                                  <a-menu-item class="menu-item-box">
                                    <div
                                      class="menu-item-style"
                                      @click="deleteItem(item)"
                                    >
                                      <div>
                                        <u-icon-font
                                          :type="enmuList.iconList.sc"
                                        />
                                      </div>
                                      <div class="menu-item-text">
                                        {{ enmuList.editText[1] }}
                                      </div>
                                    </div>
                                  </a-menu-item>
                                </a-menu>
                              </template>
                            </a-dropdown>
                          </div>
                        </div>
                      </template>
                    </a-list-item-meta>
                    <div
                      class="contain-style"
                      @click="detailClick(enmuList.dialogTitleText[0], item)"
                    >
                      <p v-html="item.content"></p>
                    </div>
                    <template #actions>
                      <span>
                        <span>
                          <span>发布于：</span>
                          <span class="text-margin-8">
                            {{ item.createtime }}
                          </span>
                        </span>
                        <span
                          class="icon-margin-64"
                          @click="
                            detailClick(enmuList.dialogTitleText[0], item)
                          "
                        >
                          <u-icon-font :type="enmuList.iconList.pl" />
                          <span class="text-margin-8">
                            {{ item.commentsCount }} 条
                          </span>
                          <span class="text-margin-8">评论</span>
                        </span>
                        <span
                          class="icon-margin-64"
                          @click="
                            detailClick(enmuList.dialogTitleText[3], item)
                          "
                        >
                          <u-icon-font :type="enmuList.iconList.ywxg" />
                          <span class="text-margin-8">与我相关</span>
                          <span class="text-margin-8">
                            ({{ item.numbers }})
                          </span>
                        </span>
                      </span>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </div>
            <!-- 留白 -->
            <div class="kb-box"></div>
          </div>
        </a-tab-pane>
        <!-- 我的发布 -->
        <a-tab-pane
          :key="enmuList.tabHeaderText[1].key"
          :tab="enmuList.tabHeaderText[1].tab"
          force-render
        >
          <div class="item-box-style" ref="parentContainer">
            <div ref="listContent">
              <a-list
                item-layout="vertical"
                size="mini"
                :data-source="listData"
              >
                <template #renderItem="{ item }">
                  <a-list-item key="item.title">
                    <a-list-item-meta>
                      <template #title>
                        <div class="title-box-style">
                          <b
                            class="title-style1"
                            @click="
                              detailClick(enmuList.dialogTitleText[0], item)
                            "
                          >
                            {{ item.title }}
                          </b>
                          <!-- 更多操作 -->
                          <div class="iconDown-style1">
                            <a-dropdown
                              :placement="'bottomLeft'"
                              :trigger="['click']"
                            >
                              <u-icon-font :type="enmuList.iconList.more" />
                              <template #overlay>
                                <a-menu>
                                  <a-menu-item class="menu-item-box">
                                    <div
                                      class="menu-item-style"
                                      @click="reviseItem(item)"
                                    >
                                      <div>
                                        <u-icon-font
                                          :type="enmuList.iconList.xg"
                                        />
                                      </div>
                                      <div class="menu-item-text">
                                        {{ enmuList.editText[0] }}
                                      </div>
                                    </div>
                                  </a-menu-item>
                                  <a-menu-item class="menu-item-box">
                                    <div
                                      class="menu-item-style"
                                      @click="deleteItem(item)"
                                    >
                                      <div>
                                        <u-icon-font
                                          :type="enmuList.iconList.sc"
                                        />
                                      </div>
                                      <div class="menu-item-text">
                                        {{ enmuList.editText[1] }}
                                      </div>
                                    </div>
                                  </a-menu-item>
                                </a-menu>
                              </template>
                            </a-dropdown>
                          </div>
                        </div>
                      </template>
                    </a-list-item-meta>
                    <div
                      class="contain-style"
                      @click="detailClick(enmuList.dialogTitleText[0], item)"
                    >
                      <p v-html="item.content"></p>
                    </div>
                    <template #actions>
                      <span>
                        <span>
                          <span>发布于：</span>
                          <span class="text-margin-8">
                            {{ item.createtime }}
                          </span>
                        </span>
                        <span
                          class="icon-margin-64"
                          @click="
                            detailClick(enmuList.dialogTitleText[0], item)
                          "
                        >
                          <u-icon-font :type="enmuList.iconList.pl" />
                          <span class="text-margin-8">
                            {{ item.commentsCount }} 条
                          </span>
                          <span class="text-margin-8">评论</span>
                        </span>
                        <span
                          class="icon-margin-64"
                          @click="
                            detailClick(enmuList.dialogTitleText[2], item)
                          "
                        >
                          <u-icon-font :type="enmuList.iconList.ywxg" />
                          <span class="text-margin-8">未读</span>
                          <span class="text-margin-8">
                            ({{ item.numbers }})
                          </span>
                        </span>
                      </span>
                    </template>
                  </a-list-item>
                </template>
              </a-list>
            </div>
            <!-- 留白 -->
            <div class="kb-box"></div>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-layout-content>
    <div class="pagination-box-style">
      <a-pagination
        v-model:current="pageIndex"
        v-model:page-size="pageSize"
        :total="total"
        :show-total="total => `共 ${total} 条`"
        @change="getSerach(pageIndex)"
      />
    </div>
  </a-layout>

  <!-- 消息浮动图标按钮 -->
  <a-float-button
    shape="circle"
    type="primary"
    style="right: 20px; bottom: 120px"
    @click="addEdit"
  >
    <template #icon>
      <u-icon-font
        :type="enmuList.iconList.xz"
        style="font-size: 16px; color: #fff"
      />
    </template>
  </a-float-button>
  <!-- 详情 -->
  <Detail
    :open="detailOpen"
    :keyid="detailKeyid"
    @close="detailClose"
    :title="detailTilte"
  ></Detail>
  <!-- 新增编辑 -->
  <Edit
    v-model:open="editOpen"
    :title="editTitle"
    :keyid="EditKeyid"
    @submit="editSubmit"
    wrap-class-name="full-modal"
  ></Edit>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, onUpdated, ref, watch } from 'vue';
import { messageC, alertC } from '@/util/common';
import { useLoginStore } from '@/store';
import Detail from './Detail.vue';
import Edit from './Edit.vue';

import * as ForumAPI from '@/service/assist/forum/index';
import * as ENMULIST from './Enmu';
import { storeToRefs } from 'pinia';

// 展示全部的删除功能
const showAllDel = ref(false);

// 缓存
const { userInfo } = storeToRefs(useLoginStore());

// 枚举集合
const enmuList = ref(ENMULIST);
// 筛选时间范围
const rangeTime = ref();
// 筛选框热度
const heatSort = ref('1');
// 热度选项
const heatSortOptions = ref(enmuList.value.heatSortOptions);
//tabs点击
const activeKey = ref(enmuList.value.tabHeaderText[0].key);
//数据内容
const listData = ref([]);
//详情打开选项
const detailOpen = ref(false);
// 编辑新增打开选项
const editOpen = ref(false);
// 详情标题
const detailTilte = ref('');
// 编辑新增标题
const editTitle = ref('');
// 新增编辑keyid
const EditKeyid = ref('');
//论坛详情keyid
const detailKeyid = ref('');
// 滚动父盒子dom获取
const parentContainer = ref<HTMLElement | null>(null);
// 滚动子盒子dom获取
const listContent = ref<HTMLElement | null>(null);

// 分页页码
const pageIndex = ref(1);
// 分页条数
const pageSize = ref(10);
//总条数
const total = ref(0);

// 详情点击事件
const detailClick = (val, item) => {
  detailTilte.value = val;
  detailOpen.value = true;
  detailKeyid.value = item.keyid;
};
// 详情关闭事件
const detailClose = val => {
  detailOpen.value = val;
  getSerach();
};

//新增论贴
const addEdit = () => {
  EditKeyid.value = '';
  editOpen.value = true;
  editTitle.value = '新增';
};
// 编辑论贴
const reviseItem = val => {
  EditKeyid.value = val.keyid;
  editOpen.value = true;
  editTitle.value = '编辑';
};

// 新增编辑提交保存
const editSubmit = val => {
  editOpen.value = false;
  EditKeyid.value = '';
  getSerach();
};

// 删除
const deleteItem = async val => {
  alertC('确定删除选中的数据?', 'confirm')
    .then(async () => {
      const res = await ForumAPI.del({ ids: val.keyid });
      if (res.code == 0) {
        getSerach();
        messageC(res.msg, 'success');
      } else {
        messageC(res.msg, 'error');
      }
    })
    .catch({});
};
// 初始数据
const orginPlForm = () => {
  rangeTime.value = [];
  heatSort.value = '1';
};

//显示全部删除的函数
const sureShowAllDel = () => {
  // 通过缓存判断用户权限
  for (let key in userInfo.value.extra.roles) {
    if (key == 1) {
      showAllDel.value = true;
    }
  }
};

// 查询
const getSerach = async (index?: number) => {
  if (!index) {
    pageIndex.value = 1;
  } else {
    pageIndex.value = index;
  }
  let startTime;
  let endTime;
  if (rangeTime.value && rangeTime.value.length == 2) {
    //开始时间加入时分秒
    startTime = rangeTime.value[0] + ' 00:00:00';
    //结束时间加入时分秒
    endTime = rangeTime.value[1] + ' 00:00:00';
  } else {
    startTime = '';
    endTime = '';
  }
  const res = await ForumAPI.getPage({
    size: pageSize.value,
    current: pageIndex.value,
    model: {
      pageType: Number(activeKey.value),
      startTime: startTime,
      endTime: endTime,
      heatSort: heatSort.value,
    },
  });
  if (res.code == 0) {
    listData.value = res.data.records;
    // 正则表达式匹配第一个 <p> 标签及其内容
    const regex = /<p>(.*?)<\/p>/;
    listData.value.forEach(item => {
      const match = item.content.match(regex);
      if (match && match[1]) {
        // 如果字符串超过60个长度影藏加...
        if (match[1].length > 60) {
          item.content = `<p>${match[1].substr(0, 60)}...</p>`;
        } else {
          item.content = `<p>${match[1]}</p>`;
        }
      } else {
        item.content = `<p></p>`;
      }
    });
    total.value = Number(res.data.total);
  } else {
    messageC(res.msg, 'error');
  }
};

onMounted(async () => {
  sureShowAllDel();
  getSerach();
});

watch(
  () => activeKey.value,
  () => {
    if (activeKey.value == '1') {
      orginPlForm();
    }
    getSerach();
  }
);
</script>

<style lang="scss" scoped>
:deep(table) {
  border: 1px solid !important;
}
:deep(tr) {
  border: 1px solid !important;
}
:deep(th) {
  border: 1px solid !important;
}
:deep(td) {
  border: 1px solid !important;
}
:deep(.ant-tabs-nav-wrap) {
  margin-left: 24px;
}
.item-box-style {
  overflow-y: auto;
  height: calc(100vh - 200px);
}

.bg-content {
  background: #fff;
  margin: 0;
}
.icon-margin-64 {
  margin-left: 62px;
}
.text-margin-8 {
  margin-left: 8px;
  font-size: 14px;
  cursor: pointer;
}

.contain-style {
  font-weight: 400;
  font-size: 15px;
  color: #333333;
  cursor: pointer;
}

.title-style {
  cursor: pointer;
}

.title-box-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .title-style1 {
    cursor: pointer;
    font-size: 18px;
  }
}

.menu-item-box {
  .menu-item-style {
    display: flex;
    align-items: center;
    .menu-item-text {
      margin-left: 10px;
    }
  }
}

.nomore-style {
  display: flex;
  justify-content: center;
  align-items: center;
}

.kb-box {
  padding: 20px;
}
.pagination-box-style {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 40px;
  padding-bottom: 10px;
}

:deep(.ant-list-item-meta) {
  margin-block-end: 0 !important;
}

.rightExtra-box-style {
  top: -20px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  .rightExtra-range-box {
    width: 300px;
    margin-right: 10px;
  }
  .rightExtra-select-box {
    margin-right: 10px;
  }
}
</style>
